<template>
  <div class="order-cancel">
    <Search />
    <el-table
      :data="tableData"
      style="width: 100%"
      :height="500"
      :header-cell-style="{background:'#eee',color:'#000'}"
    >
      <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
      <el-table-column prop="deliveryDate" label="交货期" width="150">
      </el-table-column>
      <el-table-column prop="order" label="订单项" width="170">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="150">
        <template slot-scope="scope">
          <div><div style="width:8px;height:8px;background:#FFCBCB;margin-right:5px;border-radius: 50%;display:inline-block;"></div>{{ scope.row.status }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="model" label="型号" width="150">
      </el-table-column>
      <el-table-column prop="brand" label="品牌" width="150"> </el-table-column>
      <el-table-column prop="number" label="数量" width="150">
      </el-table-column>
      <el-table-column prop="batch" label="批次" width="150"> </el-table-column>
      <el-table-column prop="package" label="封装" width="150">
      </el-table-column>
      <el-table-column prop="currecy" label="币种" width="150">
      </el-table-column>
      <el-table-column prop="price" label="单价" width="150">
        <template slot-scope="scope">
          <div style="color:#32B457;">{{ scope.row.price }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="money" label="订单金额" width="150">
        <template slot-scope="scope">
          <div style="color:#FF7600;">{{ scope.row.money }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="advance" label="预付款"  width="150">
        <template slot-scope="scope">
          <div style="color:#FF7600;">{{ scope.row.advance }}</div>
        </template>
      </el-table-column>
      ><el-table-column prop="address" label="交货地" width="150">
      </el-table-column>
      <el-table-column prop="formerDate" label="原交货期" width="150">
      </el-table-column>
      ><el-table-column prop="MPQ" label="MPQ" width="150"> </el-table-column
      ><el-table-column prop="packing" label="包装" width="150">
      </el-table-column>
      <el-table-column prop="date" label="下单日期" width="150">
      </el-table-column>
      <el-table-column prop="desc" label="备注" width="150"> </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      layout="total,sizes,prev, pager, next,jumper"
      :total="50"
    >
    </el-pagination>
  </div>
</template>

<script>
import Search from "./listSearch.vue";
export default {
  name: "orderCancel",
  data() {
    return {
        tableData: [
        {
        deliveryDate:'2023-02-20',
        order:'DD22020000295-006',
        status:'已取消',
        model:'H1',
        brand:'KEMET',
        number:'100',
        batch:'1',
        package:'XXXW95',
        currecy:'人民币',
        price:"10.00",
        money:'1000',
        advance:'1000',
        address:'国内',
        formerDate:'2022-02-20',
        MPQ:'1',
        packing:'散装',
        date:'2022-10-30',
        desc:''
      },
        {
        deliveryDate:'2023-02-20',
        order:'DD22020000295-006',
        status:'已取消',
        model:'H1',
        brand:'KEMET',
        number:'100',
        batch:'1',
        package:'XXXW95',
        currecy:'人民币',
        price:"10.00",
        money:'1000',
        advance:'1000',
        address:'国内',
        formerDate:'2022-02-20',
        MPQ:'1',
        packing:'散装',
        date:'2022-10-30',
        desc:''
      },
       {
        deliveryDate:'2023-02-20',
        order:'DD22020000295-006',
        status:'已取消',
        model:'H1',
        brand:'KEMET',
        number:'100',
        batch:'1',
        package:'XXXW95',
        currecy:'人民币',
        price:"10.00",
        money:'1000',
        advance:'1000',
        address:'国内',
        formerDate:'2022-02-20',
        MPQ:'1',
        packing:'散装',
        date:'2022-10-30',
        desc:''
      },
      {
        deliveryDate:'2023-02-20',
        order:'DD22020000295-006',
        status:'已取消',
        model:'H1',
        brand:'KEMET',
        number:'100',
        batch:'1',
        package:'XXXW95',
        currecy:'人民币',
        price:"10.00",
        money:'1000',
        advance:'1000',
        address:'国内',
        formerDate:'2022-02-20',
        MPQ:'1',
        packing:'散装',
        date:'2022-10-30',
        desc:''
      },
      ],
    };
  },
  components: {
    Search,
  },
};
</script>

<style scoped lang="scss">
.order-cancel {
  .pagination {
    margin-top: 10px;
    text-align: right;
  }
}
</style>